<template>
  <div style="height: 100%" class=" containerBox ">
<div style="width: 100%">
    <div class="insertBox">
      <div class="titleBox">
        <div class="tiltleNmae">
          {{ detailsList.bookingName }}
        </div>
        <div class="tiltleTime">
          {{ detailsList.bookingTime }}
        </div>
      </div>
      <div style="width: 100%;    padding:   20px;">
        <div class="singleBox">
          <div style="font-size: 20px;font-weight:initial;">
            人数：
          </div>
          <div style="color: #989898">{{ detailsList.number }}</div>
        </div>
        <div class="singleBox">
          <div style="font-size: 20px;font-weight:initial;">
            餐标：
          </div>
          <div style="color: #989898">{{ detailsList.mealLabel }}</div>
        </div>
        <div class="singleBox">
          <div style="font-size: 20px;font-weight:initial;">
            预定餐：
          </div>
          <div style="color: #989898">{{ detailsList.eatTime }}</div>
        </div>
      </div>
    </div>
    <div class="dialogBox">
      <el-button   @click="toBack">返回</el-button>
      <el-button type="primary" @click="handleDelete">删除</el-button>
    </div>

</div>
  </div>
</template>

<script>
  import {bookdelete, bookDetails} from "@/request/request.js";

  export default {
    data() {
      return {
        detailsList: {},
        id: ''
      };
    },
    created() {
      this.id = this.$route.query.id
      if (this.$route.query.id) {
        this.getDetails(this.$route.query.id)
      }
    },
    methods: {
      toBack(){
        this.$router.push('/')
      },
      getDetails(id) {
        bookDetails(id).then(res => {
          if (res.code === 200) {
            this.detailsList = res.data
          } else {
            this.$message({message: res.msg, type: 'warning'})
          }
        }).catch(error => {
          // 处理任何可能发生的错误
          console.error('Error fetching data:', error);
        });
      },
      handleDelete() {
        this.$confirm('确认要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          showCancelButton: true,  // 显示取消按钮
          showClose: false, // 不显示右上角的x
          closeOnClickModal: false, // 点击模态框外部不关闭弹窗
        }).then(() => {
          // 删除
          bookdelete(this.id).then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '删除成功'
              });
              this.$router.push('/')
            }
          }).catch(error => {
            // 处理任何可能发生的错误
            console.error('Error fetching data:', error);
          });

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });

      }
    }
  };
</script>
<style>
  .el-message-box {
    width: 60% !important;
  }
</style>
<style scoped>

  .containerBox {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

  }
  .tiltleTime{
    margin:0px  0px 10px 20px;
    color: white;
  }
  .tiltleNmae{
    margin:30px  0px 10px 20px;
    font-size: 32px;
    color: white;
  }

  .titleBox {
    background-color: #409eff;
    width: 100%;
    border-radius: 20px  20px 0px 0px;
  }

  .insertBox {
    border: 1px solid #eeeeee;
    box-shadow: 5px 5px 20px 1px rgba(114, 130, 138, 0.1);
    margin: 0px auto;
    display: flex;
    width: 80%;
    border-radius: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .dialogBox {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .singleBox {
    display: flex;
    justify-content: space-between;
    margin: 20px 20px;
  }

</style>
